<template>
  <div class="hv-designer-canvas-panel-bottom">
    <div
      class="hv-designer-canvas-panel-bottom-btn"
      :title="refLineVisible ? '显示参考线' : '隐藏参考线'"
      @click="refLineToggle"
    >
      <hv-dynamic-icon
        :iconName="refLineVisible ? 'SvgIconRefLine' : 'SvgIconRefLineInvisible'"
      />
    </div>
    <a-popconfirm title="您确认清除参考线?" overlayClassName="hv-dark-popover" @confirm="clearRefLine">
      <div
        class="hv-designer-canvas-panel-bottom-btn hv-designer-canvas-panel-bottom-btn-clear"
        title="清除参考线"
      >
        <hv-dynamic-icon :iconName="'ClearOutlined'" />
      </div>
    </a-popconfirm>
    <div
      class="hv-designer-canvas-panel-bottom-btn hv-designer-canvas-panel-bottom-btn-grid"
      :title="gridVisible ? '显示网格' : '隐藏网格'"
      @click="gridToggle"
    >
      <hv-dynamic-icon :iconName="gridVisible ? 'SvgIconGrid' : 'SvgIconGridInvisible'" />
    </div>
    <div
      class="hv-designer-canvas-panel-bottom-btn hv-designer-canvas-panel-bottom-btn-adaption"
      @click="canvasSelfAdaption"
      :title="'缩放自适应'"
    >
      <hv-dynamic-icon :iconName="'SvgIconSelfAdaption'" />
    </div>
    <div class="hv-designer-canvas-panel-bottom-slider">
      <a-slider
        v-model:value="canvasPanelPercentage"
        :min="percentageMinVal"
        :max="percentageMaxVal"
        :step="percentageStepVal"
        @change="canvasPercentageChange"
      />
    </div>
    <a-popover v-model:visible="percentagePopoverVisible" :title="null" trigger="click">
      <template #content>
        <a-form
          ref="percentageFormRef"
          :model="percentageFormState"
          :rules="percentageRules"
        >
          <a-form-item label="缩放值" name="percentageValue">
            <a-input-number
              v-model:value="percentageFormState.percentageValue"
              :min="percentageMinVal"
              :max="percentageMaxVal"
              :step="percentageStepVal"
              :size="'small'"
              :style="{ width: '100px' }"
            />
          </a-form-item>
        </a-form>
        <div class="ant-popover-buttons">
          <a-button :size="'small'" @click="percentagePopoverVisible = false"
            >取消</a-button
          >
          <a-button type="primary" :size="'small'" @click="canvasPercentagePopoverOk">
            确定
          </a-button>
        </div>
      </template>
      <div
        class="hv-designer-canvas-panel-bottom-btn hv-designer-canvas-panel-bottom-percentage"
        :title="'编辑缩放'"
        @click="openPercentagePopover"
      >
        {{ canvasPanelPercentage }}%
      </div>
    </a-popover>
  </div>
</template>

<script lang="ts">
import { canvasPanelConfig } from "@/visual/configs/dashboard-conifg";
import { defineComponent, nextTick, reactive, ref, type UnwrapRef, watch } from "vue";

export default defineComponent({
  name: "DesignerCanvasPanelBottom",
  props: {
    canvasPercentage: {
      type: Number,
      default: canvasPanelConfig.percentageMaxVal,
    },
  },
  emits: [
    "update:canvasPercentage",
    "gridToggle",
    "refLineToggle",
    "clearRefLine",
    "canvasPercentageChange",
    "canvasSelfAdaption",
  ],
  setup(props, context) {
    //参考线是否显示
    const refLineVisible = ref(true);

    //网格是否显示
    const gridVisible = ref(true);

    //画布百分比
    const canvasPanelPercentage = ref<number>(canvasPanelConfig.percentageMaxVal);

    //百分比弹框
    const percentagePopoverVisible = ref<boolean>(false);
    const percentageFormRef = ref();
    const percentageFormState: UnwrapRef<{ percentageValue: number }> = reactive({
      percentageValue: canvasPanelConfig.percentageMaxVal,
    });

    const percentageRules = {
      percentageValue: {
        required: true,
        message: "请输入缩放值！",
        type: "number",
        trigger: "change",
      },
    };

    //百分比边界值
    const percentageMinVal = ref<number>(canvasPanelConfig.percentageMinVal);
    const percentageMaxVal = ref<number>(canvasPanelConfig.percentageMaxVal);
    const percentageStepVal = ref<number>(canvasPanelConfig.percentageStepVal);

    watch(
      () => props.canvasPercentage,
      () => {
        canvasPanelPercentage.value = props.canvasPercentage;
        percentageFormState.percentageValue = props.canvasPercentage;
      },
      { deep: false, immediate: true }
    );

    /**
     * 参考线切换
     */
    const refLineToggle = () => {
      refLineVisible.value = !refLineVisible.value;
      context.emit("refLineToggle", refLineVisible.value);
    };

    /**
     * 设置参考线
     */
    const setRefLineVisible = (val: boolean) => {
      refLineVisible.value = val;
    };

    /**
     * 风格切换
     */
    const gridToggle = () => {
      gridVisible.value = !gridVisible.value;
      context.emit("gridToggle", gridVisible.value);
    };

    /**
     * 清除参考线
     */
    const clearRefLine = () => {
      context.emit("clearRefLine");
    };

    /**
     * 画布自适应
     */
    const canvasSelfAdaption = () => {
      context.emit("canvasSelfAdaption");
    };

    /**
     * 画布百分比
     */
    const canvasPercentageChange = (v: number) => {
      let value: number = v;
      if (value < percentageMinVal.value) {
        value = percentageMinVal.value;
      }

      if (value > percentageMaxVal.value) {
        value = percentageMaxVal.value;
      }

      context.emit("update:canvasPercentage", value);
      context.emit("canvasPercentageChange", v);
    };

    /**
     * 打开百分比弹框
     */
    const openPercentagePopover = () => {
      percentagePopoverVisible.value = true;
      nextTick(() => {
        if(percentageFormRef.value && percentageFormRef.value.clearValidate){
          percentageFormRef.value.clearValidate();
        }
        percentageFormState.percentageValue = canvasPanelPercentage.value;
      });
    };

    /**
     * 百分比弹框确定
     */
    const canvasPercentagePopoverOk = () => {
      percentageFormRef.value.validate().then((values: any) => {
        canvasPercentageChange(values.percentageValue);
        canvasPanelPercentage.value = values.percentageValue;
        percentagePopoverVisible.value = false;
      });
    };

    return {
      percentageMinVal,
      percentageMaxVal,
      percentageStepVal,
      refLineVisible,
      percentagePopoverVisible,
      gridVisible,
      canvasPanelPercentage,
      percentageFormState,
      percentageFormRef,
      percentageRules,
      refLineToggle,
      gridToggle,
      clearRefLine,
      setRefLineVisible,
      canvasPercentageChange,
      canvasSelfAdaption,
      canvasPercentagePopoverOk,
      openPercentagePopover,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerCanvasPanelBottom.less";
</style>
